<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>

<body>
  <!-- 
  <div class="container">
    <div class="div">
      <div class="week">一</div>
      <div class="date">20</div>
    </div>
    <div class="div">
      <div class="week">二</div>
      <div class="date">21</div>
    </div>
    <div class="div">
      <div class="week">三</div>
      <div class="date">23</div>
    </div>
    <div class="div">
      <div class="week">四</div>
      <div class="date">24</div>
    </div>
    <div class="div">
      <div class="week">五</div>
      <div class="date">25</div>
    </div>
    <div class="div">
      <div class="week">六</div>
      <div class="date">26</div>
    </div>
    <div class="div">
      <div class="week">日</div>
      <div class="date">27</div>
    </div>
  </div>
  <div class="container">
    <div class="div">
      <div class="week">一</div>
      <div class="date">20</div>
    </div>
    <div class="div">
      <div class="week">二</div>
      <div class="date">21</div>
    </div>
    <div class="div">
      <div class="week">三</div>
      <div class="date">23</div>
    </div>
    <div class="div">
      <div class="week">四</div>
      <div class="date">24</div>
    </div>
    <div class="div">
      <div class="week">五</div>
      <div class="date">25</div>
    </div>
    <div class="div">
      <div class="week">六</div>
      <div class="date">26</div>
    </div>
    <div class="div">
      <div class="week">日</div>
      <div class="date">27</div>
    </div>
  </div>
  <div class="container">
    <div class="div">
      <div class="week">一</div>
      <div class="date">20</div>
    </div>
    <div class="div">
      <div class="week">二</div>
      <div class="date">21</div>
    </div>
    <div class="div">
      <div class="week">三</div>
      <div class="date">23</div>
    </div>
    <div class="div">
      <div class="week">四</div>
      <div class="date">24</div>
    </div>
    <div class="div">
      <div class="week">五</div>
      <div class="date">25</div>
    </div>
    <div class="div">
      <div class="week">六</div>
      <div class="date">26</div>
    </div>
    <div class="div">
      <div class="week">日</div>
      <div class="date">27</div>
    </div>
  </div> -->
  <style>
    .container {
      width: 490px;
      margin: 0 auto;
      margin-bottom: 10px;
      user-select: none;
    }

    .container::after {
      content: "";
      display: table;
      clear: both;
    }

    .box {
      width: 50px;
      border-radius: 50px;
      text-align: center;
      box-sizing: border-box;
      padding-bottom: 10px;
      background-color: rgb(255, 174, 237);
      float: left;
      margin-right: 20px;
      box-shadow: 0 10px 12px rgba(255, 174, 212, 0.36);
      transition: box-shadow .3s, transform .2s ease-out, background-color .3s;
      cursor: pointer;
    }

    .box:hover {
      box-shadow: 0 10px 12px rgba(192, 1, 90, 0.5);
      transform: translateY(-6px);
      background-color: rgb(209, 52, 125);
    }

    .week {
      height: 30px;
      line-height: 30px;
      box-sizing: border-box;
      padding-top: 14px;
      color: white;
    }

    .date {
      height: 40px;
      line-height: 40px;
      box-sizing: border-box;
      color: rgb(97, 72, 143);
      width: 40px;
      background-color: white;
      font-weight: bold;
      border-radius: 50%;
      margin: 0 auto;
      margin-top: 16px;
    }

    .container .box.dateMark .date {
      background-color: #ff54a7;
      color: white
    }

    .container .box:nth-last-child(1) {
      background-color: rgb(255, 220, 174);
    }

    .container .box:nth-last-child(1):hover {
      background-color: rgb(197, 116, 10);
      box-shadow: 0 10px 12px rgba(192, 125, 1, 0.5);
    }

    .container .box:nth-last-child(2) {
      background-color: rgb(255, 220, 174);
    }

    .container .box:nth-last-child(2):hover {
      background-color: rgb(197, 116, 10);
      box-shadow: 0 10px 12px rgba(192, 125, 1, 0.5);
    }
  </style>
  <script>
    function cratePreDate() {
      let container = document.createElement("div")
      container.classList.add("container")

      document.body.appendChild(container)
      return container;
    }

    function createBox(container, Week, DateNo, mark) {
      let box = document.createElement("div")
      box.classList.add('box')

      mark && box.classList.add(mark)

      let week = document.createElement("div")
      week.classList.add("week")
      week.innerText = Week

      let date = document.createElement("div")
      date.classList.add("date")
      date.innerText = DateNo

      box.appendChild(week)
      box.appendChild(date)
      container.appendChild(box)
    }

    function createCander(mark) {
      let container = cratePreDate()
      createBox(container, "Mon", 21)
      createBox(container, "Tue", 22,mark)
      createBox(container, "Wed", 23)
      createBox(container, "Thu", 24)
      createBox(container, "Fri", 25, mark)
      createBox(container, "Sat", 25,mark)
      createBox(container, "Sun", 25)
    }
    createCander()
    createCander("dateMark")
    createCander()
  </script>
</body>

</html>